<template>
  <view class="custom-bar" :style="customBarStyle">
    <slot />
  </view>
</template>

<script>
export default {
  name: 'CustomBar',
  props: {
    bgColor: {
      type: String,
      default: '#fff'
    },
    height: {
      type: [String, Number],
      default: '' // 自动适配
    }
  },
  computed: {
    customBarStyle() {
      let h = this.height;
      if (!h && this.$root.$mp && this.$root.$mp.app) {
        h = this.$root.$mp.app.$vm.$options.globalData && this.$root.$mp.app.$vm.$options.globalData.CustomBar;
      }
      h = h || (this.$root.CustomBar || 44);
      return `height: ${h}px; background:${this.bgColor};`;
    }
  }
};
</script>

<style scoped>
.custom-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 24rpx;
  /* 可根据需要自定义阴影、圆角等 */
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  z-index: 999;
}
</style>
